<!-- 首页-->
<template>
	<div class="all-content">
		<view class="content-two" >
			<view class="two-top">
				<image  src="../../static/hp_zczh_icon.png" style="width: 52upx;height: 52upx;margin-left: 32upx;" mode="scaleToFill"></image>
				<text style="font-size: 32upx;color: #0C9CDC;margin-left: 20upx;">{{inter.mty}}</text>
			</view>
			<view class="under-line"></view>
			<view class="two-bottom">
				<view :class="[languageEN ? 'left-bottom-EN' : 'left-bottom']">
					<text style="color: #2F2F2F;font-size: 40upx;font-weight:400;">{{integratedProduct}}</text>
					<text style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.mt}}</text>
				</view>
				<view class="right-bottom">
					<view class="yiel-reached" >
						<text :class="[languageEN ? 'progress-title-EN' : 'progress-title']" style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.yie}}</text>
						<view class="progress-all">
							<view class="percent" :style="{width:integratedWidth}">
								<text v-show="integratedPYShow" style="color: #FFFFFF;font-size: 24upx;">{{integratedProductYield}}</text>
							</view>
							<text v-show="!integratedPYShow" style="color: #2F2F2F;font-size: 24upx;">{{integratedProductYield}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-two" >
			<view class="two-top">
				<image  src="../../static/hp_rg_icon.png" style="width: 52upx;height: 52upx;margin-left: 32upx;" mode="scaleToFill"></image>
				<text style="font-size: 32upx;color: #BE4E5C;margin-left: 20upx;">{{inter.ioh}}</text>
				<text style="font-size: 28upx;color: #2F2F2F;margin-left: 80upx; position: absolute; right: 68upx;">{{inter.target+':'+thermalProductTarget}}</text>
			</view>
			<view class="under-line"></view>
			<view class="two-bottom">
				<view :class="[languageEN ? 'left-bottom-EN' : 'left-bottom']" @click="goToDetails('left', 'H', 2)">
					<text style="color: #2F2F2F;font-size: 40upx;font-weight:400;">{{thermalProduct}}</text>
					<text style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.mt}}</text>
				</view>
				<view class="right-bottom" @click="goToDetails('right', 'H',2)">
					<view class="yiel-reached" style="margin-bottom: 6upx;">
						<text :class="[languageEN ? 'progress-title-EN' : 'progress-title']" style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.tyr}}</text>
						<view class="progress-all">
							<view class="percent"  :style="{width:thermalReachWidth}">
								<text v-show="thermalReachShow" style="color: #FFFFFF;font-size: 24upx;">{{thermalReachYield}}</text>
							</view>
							<text v-show="!thermalReachShow" style="color: #2F2F2F;font-size: 24upx;">{{thermalReachYield}}</text>
						</view>
					</view>
					<view class="yiel-reached">
						<text :class="[languageEN ? 'progress-title-EN' : 'progress-title']" style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.yie}}</text>
						<view class="progress-all">
							<view class="percent"  :style="{width:thermalProductWidth}">
								<text v-show="thermalProductShow" style="color: #FFFFFF;font-size: 24upx;">{{thermalProductYield}}</text>
							</view>
							<text v-show="!thermalProductShow" style="color: #2F2F2F;font-size: 24upx;">{{thermalProductYield}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content-two" >
			<view class="two-top">
				<image  src="../../static/hp_jj_icon.png" style="width: 52upx;height: 52upx;margin-left: 32upx;" mode="scaleToFill"></image>
				<text style="font-size: 32upx;color: #EF9A21;margin-left: 20upx;">{{inter.iom}}</text>
				<text style="font-size: 28upx;color: #2F2F2F;margin-left: 80upx;position: absolute; right: 68upx;">{{inter.target+':'+machineProductTarget}}</text>
			</view>
			<view class="under-line"></view>
			<view class="two-bottom">
				<view :class="[languageEN ? 'left-bottom-EN' : 'left-bottom']" @click="goToDetails('left', 'M', 3)">
					<text style="color: #2F2F2F;font-size: 40upx;font-weight:400;">{{machineProduct}}</text>
					<text style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.mt}}</text>
				</view>
				<view class="right-bottom" @click="goToDetails('right', 'M',3)">
					<view class="yiel-reached" style="margin-bottom: 6upx;">
						<text :class="[languageEN ? 'progress-title-EN' : 'progress-title']" style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.tyr}}</text>
						<view class="progress-all">
							<view class="percent"  :style="{width:machineReachWidth}">
								<text v-show="machineReachShow" style="color: #FFFFFF;font-size: 24upx;">{{machineReachYield}}</text>
							</view>
							<text v-show="!machineReachShow" style="color: #2F2F2F;font-size: 24upx;">{{machineReachYield}}</text>
						</view>
					</view>
					<view class="yiel-reached">
						<text :class="[languageEN ? 'progress-title-EN' : 'progress-title']" style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.yie}}</text>
						<view class="progress-all">
							<view class="percent"  :style="{width:machineProductWidth}">
								<text v-show="machineProductShow" style="color: #FFFFFF;font-size: 24upx;">{{machineProductYield}}</text>
							</view>
							<text v-show="!machineProductShow" style="color: #2F2F2F;font-size: 24upx;">{{machineProductYield}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="content-two" >
			<view class="two-top">
				<image  src="../../static/hp_tz_icon.png" style="width: 52upx;height: 52upx;margin-left: 32upx;" mode="scaleToFill"></image>
				<text style="font-size: 32upx;color: #37A891;margin-left: 20upx;">{{inter.iop}}</text>
				<text style="font-size: 28upx;color: #2F2F2F;margin-left: 80upx;position: absolute; right: 68upx;">{{inter.target+':'+coatingProductTarget}}</text>
			</view>
			<view class="under-line"></view>
			<view class="two-bottom">
				<view :class="[languageEN ? 'left-bottom-EN' : 'left-bottom']" @click="goToCoatingDetails('left', 4)">
					<text style="color: #2F2F2F;font-size: 40upx;font-weight:400;">{{coatingProduct}}</text>
					<text style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.mt}}</text>
				</view>
				<view class="right-bottom" @click="goToCoatingDetails('right', 4)">
					<view class="yiel-reached" style="margin-bottom: 6upx;">
						<text :class="[languageEN ? 'progress-title-EN' : 'progress-title']" style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.tyr}}</text>
						<view class="progress-all">
							<view class="percent"  :style="{width:coatingReachWidth}">
								<text v-show="coatingReachShow"  style="color: #FFFFFF;font-size: 24upx;">{{coatingReachYield}}</text>
							</view>
							<text v-show="!coatingReachShow" style="color: #2F2F2F;font-size: 24upx;">{{coatingReachYield}}</text>
						</view>
					</view>
					<view class="yiel-reached">
						<text :class="[languageEN ? 'progress-title-EN' : 'progress-title']" style="color: #595959;font-size: 24upx;font-weight:400;">{{inter.yie}}</text>
						<view class="progress-all">
							<view class="percent"  :style="{width:coatingProductWidth}">
								<text v-show="coatingProductShow" style="color: #FFFFFF;font-size: 24upx;">{{coatingProductYield}}</text>
							</view>
							<text v-show="!coatingProductShow" style="color: #2F2F2F;font-size: 24upx;">{{coatingProductYield}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-two" style="margin-bottom: 40upx;" @click="goToUnqual">
			<view class="two-top">
				<image  src="../../static/unqual.png" style="width: 45upx;height: 45upx;margin-left: 32upx;" mode="scaleToFill"></image>
				<text style="font-size: 32upx;color: #5055A8;margin-left: 20upx;">{{inter.qds}}</text>
			</view>
		</view>
	</div>
</template>

<script>
	import $api from '@/api/api.js';
	import $inter from '@/api/international.js'
	
	//判断进度条长度
	function judgeShow(n){
		if(n<25){
			return 0
		}else{
			return 1
		}
	}
	
	function goToNext(n,that){
		if(n==2){
			uni.setStorageSync('params',{position:that.clickPosition, type:that.clickType, productSum:that.thermalProduct, productYield:that.thermalReachYield })
			uni.navigateTo({
				url: 'reportDetails'
			});
		}else if(n==3){
			uni.setStorageSync('params',{position:that.clickPosition, type:that.clickType, productSum:that.machineProduct, productYield:that.machineReachYield })
			uni.navigateTo({
				url: 'reportDetails'
			});
		}else{
			uni.setStorageSync('params',{position:that.clickPosition,bar:1, productSum:that.coatingProduct, productYield:that.coatingReachYield})
			uni.navigateTo({
				url: 'paintingDetails'
			});
		}
	}
	
	export default {
		components:{
			
		},
		onLoad(){
			uni.getStorage({
				key:'languageValue',
				success:(res)=>{
					this.languageValue = res.data
					if (this.languageValue == '简体中文') {
						this.languageEN = false
					} else{
						this.languageEN = true
					}
				}
			})
			// console.log(JSON.stringify($inter));
			uni.setTabBarItem({
				index: 0,
				text: this.inter.homepage
			})
			uni.setTabBarItem({
				index: 1,
				text: this.inter.digitalMAF
			})
			
			uni.setTabBarItem({
				index: 2,
				text: this.inter.message
			})
			uni.setTabBarItem({
				index: 3,
				text: this.inter.my
			})
			uni.setNavigationBarTitle({
				title: this.inter.homepage
			});
			this.getHomeNorm(1)
		},
		data(){
			return {
				languageValue:'',
				
				
				integratedProduct:'', //综合成品
				integratedProductYield:'',
				integratedPYShow:true,
				integratedWidth:'',
				
				thermalProduct:'',  
				thermalProductTarget:'',   //目标值
				thermalProductYield:'',  //成品率
				thermalProductShow:true,
				thermalReachYield:'',   //达成率
				thermalReachShow:true,
				thermalProductWidth:'',
				thermalReachWidth:'',
				
				machineProduct:'',
				machineProductTarget:'',
				machineProductYield:'',
				machineProductShow:true,
				machineReachYield:'',
				machineReachShow:true,
				machineProductWidth:'',
				machineReachWidth:'',
				
				coatingProduct:'',
				coatingProductTarget:'',
				coatingProductYield:'',
				coatingProductShow:true,
				coatingReachYield:'',
				coatingReachShow:true,
				coatingProductWidth:'',
				coatingReachWidth:'',
				
				clickPosition:'', //记录点击位置及类型
				clickType:'',
				
				languageEN:''
			}
		},
		methods:{
			goToDetails(position, type, n){
				this.clickPosition=position;
				this.clickType=type;
				this.getHomeNorm(n)
				// uni.setStorageSync('params',{position:position, type:type, productSum:productSum, productYield:productYield })
				// uni.navigateTo({
				// 	url: 'reportDetails'
				// });
			},
			goToCoatingDetails(position, n){
				this.clickPosition=position;
				this.getHomeNorm(n)
				// uni.setStorageSync('params',{position:position, productSum:productSum, productYield:productYield})
				// uni.navigateTo({
				// 	url: 'paintingDetails'
				// });
			},
			getHomeNorm(n){
				console.log("89999999999");
				uni.showToast({
					title: 'loading',
					icon:'loading',
					mask:true,
				});
				$api.getHomeNorm(res=>{
					console.log("6666666666666"+JSON.stringify(res));
					this.processData(res)
					if(n!==1){
						goToNext(n,this)
					}else{
						console.log('是1')
					}
					uni.hideToast()
				},err=>{
					uni.hideToast()
				},e=>{
				})
			},
			goToUnqual(){
				uni.navigateTo({
					url:'../producting/statisticalChart/unqualified'
				});
			},
			processData(data){
				for (let i in data) {
					if (data[i].Code=='M_Fac_FG') {
						this.integratedProduct = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Fac_Yield'){
						this.integratedPYShow=judgeShow(data[i].Value)
						this.integratedWidth = uni.upx2px(data[i].Value*3.1) + 'px';
						this.integratedProductYield = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Hot_FG'){
						this.thermalProduct = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Hot_FGTarget'){
						this.thermalProductTarget = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Hot_Yield'){
						this.thermalProductShow = judgeShow(data[i].Value)
						this.thermalProductWidth = uni.upx2px(data[i].Value*3.1) + 'px';
						this.thermalProductYield = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Hot_TargetRate'){
						this.thermalReachShow = judgeShow(data[i].Value)
						this.thermalReachWidth = uni.upx2px(data[i].Value*3.1) + 'px';
						this.thermalReachYield = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Machining_FG'){
						this.machineProduct = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Machining_FGTarget'){
						this.machineProductTarget = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Machining_Yield'){
						this.machineProductShow = judgeShow(data[i].Value)
						this.machineProductWidth = uni.upx2px(data[i].Value*3.1) + 'px';
						this.machineProductYield = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Machining_TargetRate'){
						this.machineReachShow = judgeShow(data[i].Value)
						this.machineReachWidth = uni.upx2px(data[i].Value*3.1) + 'px';
						this.machineReachYield = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Paint_FG'){
						this.coatingProduct = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Paint_FGTarget'){
						this.coatingProductTarget = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Paint_Yield'){
						this.coatingProductShow = judgeShow(data[i].Value)
						this.coatingProductWidth = uni.upx2px(data[i].Value*3.1) + 'px';
						this.coatingProductYield = data[i].Value+data[i].Unit
					} else if (data[i].Code=='M_Paint_TargetRate'){
						this.coatingReachShow = judgeShow(data[i].Value)
						this.coatingReachWidth = uni.upx2px(data[i].Value*3.1) + 'px';
						this.coatingReachYield = data[i].Value+data[i].Unit
					}
				}
				uni.setStorageSync('indexData',{
					thermalProduct:this.thermalProduct, 
					thermalReachYield:this.thermalReachYield, 
					machineProduct:this.machineProduct,
					machineReachYield:this.machineReachYield,
					coatingProduct:this.coatingProduct,
					coatingReachYield:this.coatingReachYield
					})
			}
		},
		computed:{
			inter(){
				return $inter.index
			}
		},
		onNavigationBarButtonTap(e) {
			console.log("1111111111112222222222"+JSON.stringify(e))
			// uni.navigateTo({
			// 	url: 'pendingDisposal'
			// });
			// return
			if(e.index==0){
				uni.scanCode({
					onlyFromCamera: true,
					success(res) {
						console.log("33333333333333"+JSON.stringify(res));
						uni.setStorage({
							key:'scanId',
							data: res.result,
							success: function () {
								uni.navigateTo({
									url: 'pendingDisposal'
								});
							}
						})
					},
					fail(err) {
						uni.showToast({
							title:this.inter.scanErr,
							icon:'none',
							mask:true
						})
					}
				})
			}else{
				uni.navigateTo({
					url: 'scada'
				});
			}
			
		}
		
	}
</script>

<style>
	.all-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		/* background-color: #F5F8FF; */
	}
	.content-one{
		width:708upx;
		height:108upx;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 4upx 0px rgba(200,200,200,0.5);
		border-radius:16upx;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-top: 38upx;
	}
	.progress-all{
		width: 310upx;
		height: 24upx;
		background-color: #EEEEEE;
		border-radius: 12upx;
		display: flex;
		align-items: center;
	}
	.percent{
		height: 24upx;
		width: 100upx;
		background-color: #37A891;
		border-radius: 12upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 10upx;
	}
	.content-two{
		width:708upx;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 4upx 0px rgba(200,200,200,0.5);
		border-radius:16upx;
		margin-top: 24upx;
	}
	.two-top{
		height: 98upx;
		display: flex;
		align-items: center;
	}
	.under-line{
		width: 708upx;
		height: 1upx;
		background-color: #9B9B9B;
	}
	.two-bottom{
		display: flex;
	}
	.left-bottom{
		width: 260upx;
		height: 136upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.left-bottom-EN{
		width: 210upx;
		height: 136upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.right-bottom{
		height: 136upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.yiel-reached{
		display: flex;
		align-items: center;
	}
	.progress-title-EN{
		width: 130upx;
		text-align: right;
		margin-right: 15upx;
	}
	.progress-title{
		width: 110upx;
		text-align: center;
	}
</style>